<template>
<div class="font">
    <ul class="first">
        <li v-for="(item,index) in list" :key="index" @click="change(index)" :class="{active:newIndex==index}">{{item}}</li>
    </ul>
    <div class="toList">
      <ul>
        <li v-for="(item,index) in nextList" :key="index">
          <img :src="item.pic" alt="" class="img">
          
            <div class="wenzi">
              <p>{{item.wenzi}}</p> 
              <p>{{item.neirong}}</p>
              <p>${{item.price}}</p>
              <button @click="changeNav(item,index)">{{item.lq?'已抢':'马上抢'}}</button>
            </div>
            
          
        </li>
      </ul>
    </div>
</div>

</template>

<script>
  import one from "../assets/1.png";
  import two from "../assets/2.png";
  export default {
    data(){
      return{
        list:["正在抢购","上新预告"],
        newIndex:0,
        nextList:[
        {pic:one,wenzi:"汉堡王 | 新天地餐厅",neirong:"买一送一",price:25,lq:false},
        {pic:two,wenzi:"华莱士 | 进店必选",neirong:"去划算单人套餐",price:12.12,lq:false},
        ]

      }
    },
    methods:{
      change(index){//change方法
        this.newIndex = index;
        console.log(index);
        if(index==1){
          
          // this.list.sort((a,b)=>{
          //   return(a.price/1<b.price/1?-1:(a.price/1>b.price/1)?1:0)

          // })
          this.list.sort((a,b)=>{
                    return b.price - a.price;
                })
        }
      },
      changeNav(item,index){
        item.lq = true;
        console.log(this.arr);
      }
    }

}
</script>

<style lang="scss" scoped>
  .first{
    width:100%;
    height: 30px;
    list-style: none;

  }
  .first li{
    float: left;
    margin-left: 15px;
  }
  .active{
    color: skyblue;
    font-size: 18px;
    font-weight: bold;
  }
  .tolist li {
    // display: flex;
    // justify-content: space-between;
    width: 100%;
    height: 100px;
    
  }
  .wenzi{
    width: 60%;
    height: 100px;
    // flex: 1;
    float: right;
  }
  .img{
    width: 97px;
    height: 97px;
  }
</style>